<template>
  <div>
    <a-layout>
      <a-layout-header>
        <div class="logo" />
        <a-menu
          class="menue"
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['1']"
          :style="{ lineHeight: '64px' }"
           @click="handleClick"
        >
          <a-menu-item key="1"> 发现音乐 </a-menu-item>
          <a-menu-item key="2"> 我的音乐 </a-menu-item>
          <a-menu-item key="3"> 朋友 </a-menu-item>
          <a-menu-item key="4"> 商城 </a-menu-item>
          <a-menu-item key="5"> 音乐人 </a-menu-item>
          <a-menu-item key="6"> 下载客户端 </a-menu-item>
        </a-menu>
        <div class="otherTab">
          <a-input
            style="width: 200px; margin: 0 0 0 40px"
            placeholder="Please input your name"
          />
          <span class="avatar"
            ><img style="width: 50px" :src="avatarUrl"
          /></span>
        </div>
      </a-layout-header>
      <a-layout-content>
        <div  class="main__box">
          <div v-if="isShow">
          <div class="banner__box">
            <a-carousel
              class="banner__carousel"
              :after-change="onChange"
              autoplay
            >
              <div v-for="item in banners" :key="item.id">
                <img style="height: 300px" :src="item.imageUrl" />
              </div>
            </a-carousel>
          </div>
          <div class="hot__music">
            <div>
              热门歌单&nbsp;&nbsp;&nbsp;<span>华语</span>
              &nbsp;&nbsp;&nbsp;<span>流行</span> &nbsp;&nbsp;&nbsp;<span
                >摇滚</span
              >
              &nbsp;&nbsp;&nbsp;<span>民谣</span>
            </div>
            <div class="music__list__content">
              <div
                @click="showMusicList(item.id)"
                class="list__box"
                v-for="item in playList"
                :key="item.id"
              >
                <div class="list__cover">
                  <img style="height: 50px" :src="item.coverImgUrl" />
                </div>
                <div class="list__title">
                  <a class="a__title" href="javascript:;">{{ item.name }}</a>
                </div>
              </div>
            </div>
          </div>
          </div>
          <MusicList v-if="isShow2" :listId="listId"></MusicList>
          <MyMusic v-if="isShow3"></MyMusic>
        </div>
      </a-layout-content>
      <a-layout-footer>
        <Player></Player>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import MusicList from '../components/MusicList.vue'
import Player from '../components/Player.vue'
import MyMusic from '../components/MyMusic.vue'
export default {
  name: 'home',
  components: {
    MusicList,
    Player,
    MyMusic
  },
  data() {
    return {
      avatarUrl: '',
      form: {},
      banners: [],
      playList: [],
      listId: '', // 音乐列表id
      isShow2: false,
      isShow: true,
      isShow3: false,
    }
  },
  created() {
    this.avatarUrl = localStorage.getItem('avatarUrl')
    this.getBanner()
    this.getHotMusic()
  },
  methods: {
    // 查询推荐
    getBanner() {
      this.$get('/banner').then(data => {
        if (data.status === 200) {
          this.banners = data.data.banners
        } else {
          this.$message.error(data.data.msg)
        }
      })
    },
    // 歌单推荐
    getHotMusic() {
      this.$get('/top/playlist').then(data => {
        if (data.status === 200) {
          this.playList = data.data.playlists
        } else {
          this.$message.error(data.data.msg)
        }
      })
    },
    // 查看音乐列表
    showMusicList(id) {
      this.listId = id
      this.isShow = false
      this.isShow2 = true
    },
    // 菜单切换
    handleClick(data){
      console.log(data)
      if(data.key==='1'){
        this.isShow = true
        this.isShow2 = false
         this.isShow3 = false
      }else if(data.key==='2'){
        this.isShow = false
        this.isShow2 = false
        this.isShow3 = true
      }
    },
    // banner切换
    onChange() {},
  },
}
</script>

<style lang="less" scoped>
.ant-layout-header,
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub {
  background: #242424;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
  background-color: #000000;
}
.menue {
  width: 600px;
  margin: 0 auto;
}
.otherTab {
  position: absolute;
  right: 0;
  top: 0;
}
.avatar {
  display: inline-block;
  margin: 0 0 0 50px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.banner__carousel {
  height: 300px;
}

.main__box {
  width: 800px;
  margin: 0 auto;
}
.music__list__content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.list__box {
  width: 150px;
  height: 150px;
  text-align: center;
  .a__title {
    color: rgba(0, 0, 0, 0.65);
  }
  .a__title:hover {
    text-decoration: underline;
  }
}
.ant-layout-footer{
  padding: 0px;
}
</style>
